
<template>
  <div class="main">
    <div class="login">
      <div class="login_left">
      </div>
      <div class="login_form" id="login_form">
        <h1>Login</h1>
        Account<br />
        <input
          type="text"
          id="account"
          v-model="account"
          name="account"
        /><br />
        Password<br />
        <input
          type="password"
          id="password"
          v-model="password"
          name="password"
          @keyup.enter="login"
        /><br />
        <button v-on:click="login" class="btn-8">
          <p>Login</p></button
        ><br />
        <span>
          Do not have an account ? click<a href="#"> HERE</a> to join us</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "login",
  data() {
    return {
      msg: "Login",
      account: "",
      password: "",
    };
  },
  methods: {
    login: function (event) {
      console.log(this.account + this.password);
      const that = this;
      axios({
        headers: {
          "Content-Type": "application/json",
        },
        method: "Post",
        url: "http://localhost:8081/Welcome/login",
        data: JSON.stringify({
          userAccount: this.account,
          userPassword: this.password,
        }),
      }).then(function (r) {
        let head = r.headers;
        let token = head.token;
        sessionStorage.setItem("token", token);
        var result = JSON.parse(JSON.stringify(r.data));
        if (result.code === "0") {
          sessionStorage.setItem("user", JSON.stringify(result.data));
          that.$router.push("/home");
        } else {
          console.log("i am here");
          alert(result.msg);
        }
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  width: 100%;
  height: 100%;
  background-image: url("/static/img/background.png");
  background-size: 100% 120%;
}
.login {
  width: 800px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: lightblue;
  border-radius: 10px 10px 10px 10px;
}
.login_form {
  margin-top: -10px;
  margin-right: 10px;
  width: 500px;
  height: 600px;
  background-color: aliceblue;
  float: right;
  align-self: start;
  border-radius: 0px 10px 10px 0px;
  font-size: 25px;
  box-shadow: #92929296 5px 5px 15px;
}
.login_form button {
  color: rgb(255, 255, 255);
  width: 150px;
  height: 40px;
  margin: 40px;
  margin-top: 60px;
  font-size: 25px;
  box-shadow: #797777 0px 5px 10px;
  background: linear-gradient(135deg, #6e8efb, #a777e3, #edaafa, #92d3ff);
  background-size: 300%;
  transition: background-position 0.5s;
  border-radius: 10px;
  border: none;
}

.login_form button:hover {
  background-position: 100% 0;
}

.login_form span {
  font-size: 15px;
}
.login_form a:link {
  text-decoration: none;
}
.login_form h1 {
  margin: 40px;
  font-size: 80px;
}
.login_form input {
  margin: 10px;
  width: 60%;
  font-size: 20px;
  line-height: 30px;
  border-radius: 3px;
  border: aliceblue 2px solid;
  border-bottom: lightsteelblue 2px solid;
  box-shadow: inset rgb(220, 225, 228) 1px 0px 4px 2px;
}
.login_form input:hover {
  border: #c9e8ee 2px solid;
  border-bottom: lightsteelblue 2px solid;
}
.login_form input:focus {
  outline: none;
  border: #afc8fd 2px solid;
  box-shadow: #7a97f5 0px 0px 10px 1px;
}
.login_left {
  border-style: inset;
  border: 4px snow solid;
  margin-top: -10px;
  margin-left: -10px;
  float: left;
  background-color: #c9e8ee;
  width: 280px;
  height: 592px;
  border-radius: 10px 0px 0px 10px;
  box-shadow: #92929296 5px 5px 15px;
}
.register{
  display: none;
}
</style>
